<div #ganttContainer class="gantt-container">
  <div class="header" [style.width]="ganttScaleWidth">
    <d-gantt-scale [ganttBarContainerElement]="ganttBody"></d-gantt-scale>
  </div>
  <div #ganttBody class="body" [style.width]="ganttScaleWidth">
    <div class="item" *ngFor="let item of list">
      <d-gantt-bar
        [startDate]="item?.startDate"
        [endDate]="item?.endDate"
        [tipTemplateRef]="tipTemplate"
        [id]="item?.id"
        [progressRate]="item?.progressRate"
        (barMoveStartEvent)="onGanttBarMoveStart($event)"
        (barMovingEvent)="onGanttBarMoving($event)"
        (barResizeStartEvent)="onGanttBarResizeStart($event)"
        (barResizingEvent)="onGanttBarResizing($event)"
        (barMoveEndEvent)="onGanttBarMove($event)"
        (barResizeEndEvent)="onGanttBarResize($event)"
        (barProgressEvent)="onBarProgressEvent($event)"
      ></d-gantt-bar>
    </div>
  </div>
</div>
<ng-template #tipTemplate let-ganttInstance="ganttInstance" let-data="data">
  <div class="title">{{ data?.title }}</div>
  <div class="content">
    <div>Duration: {{ ganttInstance?.duration }}</div>
    <div>ProgressRate: {{ (ganttInstance?.progressRate || 0) + '%' }}</div>
    <div>startDate: {{ ganttInstance?.startDate | i18nDate: 'short' }}</div>
    <div>endDate: {{ ganttInstance?.endDate | i18nDate: 'short' }}</div>
  </div>
</ng-template>
